<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>mousewheel compatibility</title>
    <script src="/kissy/build/seed.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>

    <style type="text/css">
        body, html {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<h1>mousewheel compatibility</h1>
<button id="detach">detach</button>
<div id='t' style="width:500px;border: 1px solid red;height:200px">
    mousewheel on me
</div>
<p style="color: red">
    note:<br/>
    not perfect on mac osx with accelerated scroll
</p>
<script>
    var S = KISSY;

    KISSY.use("dom,event/dom", function (S, Dom, Event) {
        var t = Dom.get("#t");
        var tmpl = "<p>" +
                "wheelDelta:{wheelDelta}<br/>" +
                "axis:{axis}<br/>" +
                "wheelDeltaY:{wheelDeltaY}<br/>" +
                "wheelDeltaX:{wheelDeltaX}<br/>" +
                "detail:{detail}<br/>" +
                "delta:{delta}<br/>" +
                "deltaX:{deltaX}<br/>" +
                "deltaY:{deltaY}<br/>" +
                "</p>";
        var tt;
        Event.on(t, "mousewheel", tt = function (e) {

            Dom.html(t, S.substitute(tmpl, {
                wheelDelta: e.wheelDelta,
                axis: e.axis,
                wheelDeltaY: e.wheelDeltaY,
                wheelDeltaX: e.wheelDeltaX,
                detail: e.detail,
                delta: e.delta,
                deltaX: e.deltaX,
                deltaY: e.deltaY
            }));

            e.preventDefault();

        });

        Event.on("#detach", "click", function () {
            Event.remove(t, "mousewheel", tt);
        });


    });

</script>
</body>
</html>